<template>
	<!-- 大客户项目报备管理->大客户项目报备申请@1 -->
	<div>
		<!-- 搜索 -->
		<commonFilter :defaultProjectStatusList="defaultProjectStatusList"  @filterChange="changeHandle" @onCollapse="collapseHandle" />
		<!-- table -->
		<FilterTable
			ref="table"
			:columns="columns"
			:fetchapi="fetchApi"
			:isSelectColumn="isSelectColumn"
			:params="fetchParams"
			:datakey="'records'"
			columnsRef='customerManage_approvalManage_projectReportApply_index_01'
			:onColumnsChange="columns => this.columns = columns"
		>
			<template slot="controls">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
			</template>
		</FilterTable>
		<!-- 侧滑弹窗 -->
		<Drawer
			ref="infoDrawerView"
			:visible.sync="visibleDrawerView"
			title="申请明细"
			destroyOnClose
			:containerStyle="{width:'70vw',height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
		>
			<!-- 弹窗本体(查看，带审核部分) -->
			<info-modal v-model="infoId" :infoType="type" :isExamine="isExamine" :examineType="projectStatusReview" @close="viewInfoClose" />
		</Drawer>
		<Drawer
			ref="infoDrawer"
			:visible.sync="visibleDrawer"
			title="申请明细"
			destroyOnClose
			:containerStyle="{width:'70vw', minWidth:'1000px', height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
		>
			<!-- 弹窗本体（修改） -->
			<info-modal-edit v-model="infoId" :infoType="type" :isExamine="isExamine" :examineType="projectStatusReview" @close="infoClose" />
		</Drawer>
	</div>
</template>
<script>

	import { getAppId } from '@/assets/js/auth';//获取登录用户

	import commonFilter from '../commonFilter/dlrSearch';
	import infoModalEdit from '../approvalDetails/indexEdit';
	import infoModal from '../approvalDetails';
	import { dictionary } from '@/utils/dictMixin';
	import { region } from '@/api/cms-common/region';//行政区域

	import * as apiType from '@/api/cms-api/customerManage/approvalManage/types';
	import { findAllPage } from '@/api/cms-api/customerManage/approvalManage/DLR';

	export default {
		mixins: [dictionary,region],
		components: {
			commonFilter,
			infoModal,
			infoModalEdit
		},
		data() {
			return {
				projectStatusReview:apiType.PROJECT_STATUS_SAVED,
				visibleDrawer: false,
				visibleDrawerView: false,
				isSelectColumn: false,
				isExamine:false,
				infoId: '', //记录行id
				type: 'add', //add编辑 ，info详情
				fetchParams: {projectStatuss:[apiType.PROJECT_STATUS_SAVED,apiType.PROJECT_STATUS_REJECT].join(","),queryByDealerCode:apiType.QUERY_BY_DEALER_VALUE}, //参数，默认查询已保存的，根据当前经销商过滤
				columns: this.creatHeader(),
				fetchApi: findAllPage, //ipa 接口
				defaultProjectStatusList:[apiType.PROJECT_STATUS_SAVED,apiType.PROJECT_STATUS_REJECT],
			};
		},
		mounted() {
			this.BaseTable = this.$refs.table.$refs.pageTable;
		},
		methods: {
			//搜索获取数据
			changeHandle(val) {
				// console.log("val => ",val)
				this.fetchParams = Object.assign({projectStatuss:[apiType.PROJECT_STATUS_SAVED,apiType.PROJECT_STATUS_REJECT].join(","),queryByDealerCode:apiType.QUERY_BY_DEALER_VALUE},val);
			},
			//table表头和数据源
			creatHeader() {
				return [
					{
						title: '序号',
						dataIndex: 'index',
						width: 80,
						sorter: true,
						render: props => {
							return <span>{props.row.index + 1}</span>;
						}
					},
					{
						title: '操作',
						dataIndex: 'column-action',
						width: 100,
						fixed: 'left',
						render: (props, h) => {
							if(props.row.projectStatus === this.projectStatusReview || props.row.projectStatus == apiType.PROJECT_STATUS_REJECT){
								return (
									<div>
										<el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
											修改
										</el-button>
										<el-divider direction="vertical" />
										<el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
											明细
										</el-button>
									</div>
								);
							}else{
								return (
									<div>
										<el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
											明细
										</el-button>
									</div>
								);
							}
						}
					},
					{ title: '项目状态', dataIndex: 'projectStatus', sorter: true ,
						render: props => {
							return <span>{this.createDictText(props.row.projectStatus, '2516')}</span>;
						}
					},
					{ title: '项目名称', dataIndex: 'projectName', sorter: true },
					{ title: '客户公司名称', dataIndex: 'customerName', sorter: true },
					{
						title: '客户类型',
						dataIndex: 'customerType',
						sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.customerType, '2506')}</span>;
						}
					},
					{ title: '客户性质', dataIndex: 'customerProperty', sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.customerProperty, '2534')}</span>;
						}
					},
					// { title: '经销商', dataIndex: 'dealerName', sorter: true },
					{ title: '所在省', dataIndex: 'customerProvince', sorter: true,
						render: props => {
							return <span>{this.createRegionText(props.row.customerProvince)}</span>;
						}
					},
					{ title: '所在市', dataIndex: 'customerCity', sorter: true,
						render: props => {
							return <span>{this.createRegionText(props.row.customerCity)}</span>;
						}
					},
					{ title: '所在县/区', dataIndex: 'customerDistrict', sorter: true,
						render: props => {
							return <span>{this.createRegionText(props.row.customerDistrict)}</span>;
						}
					},
					{ title: '详细地址', dataIndex: 'customerAddress', sorter: true },
					{ title: '客户状态', dataIndex: 'customerStatus', sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.customerStatus, '2507')}</span>;
						}
					},
					{ title: '客户来源', dataIndex: 'customerSource', sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.customerSource, '2508')}</span>;
						}
					},
					{ title: '所属行业分类', dataIndex: 'industryCategory', sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.industryCategory, '2510')}</span>;
						}
					},
					{ title: '行业地位', dataIndex: 'industryStatus', sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.industryStatus, '2511')}</span>;
						}
					},
					{ title: '购车用途', dataIndex: 'buyPurpose', sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.buyPurpose, '2513')}</span>;
						}
					},
					{ title: '预计采购日期', dataIndex: 'estimatePurchaseDate', dateFormat: 'YYYY-MM', sorter: true },
					{ title: '客户采购方式', dataIndex: 'purchaseMode', sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.purchaseMode, '2512')}</span>;
						}
					},
					{ title: '预算来源', dataIndex: 'budgetSource', sorter: true,
						render: props => {
							return <span>{this.createDictText(props.row.budgetSource, '2514')}</span>;
						}
					}
				];
			},
			//添加
			add(){
				//渲染侧滑浮层
				this.visibleDrawer = true;
				//设置审核状态
				this.isExamine = false;
				//传递本列项目ID
				this.infoId = -1;
				//设置为只显示（审核模块不受此影响）
				this.type = 'add';
			},
			//编辑
			editHandle(infoRow) {
				//渲染侧滑浮层
				this.visibleDrawer = true;
				//设置审核状态
				this.isExamine = false;
				//传递本列项目ID
				this.infoId = infoRow.projectId;
				//设置为只显示（审核模块不受此影响）
				this.type = 'edit';
			},
			//详情
			detailHandle(infoRow) {
				this.visibleDrawerView = true;
				this.isExamine = false;
				this.infoId = infoRow.projectId;
				this.type = 'show';
			},
			//关闭浮层的回调
			infoClose(type) {
				this.visibleDrawer = false;
				if (type === 'refresh') {
					// 重新加载表格数据
					this.fetchParams = { ...this.fetchParams };
				}
			},
			//关闭浮层的回调
			viewInfoClose(type) {
				this.visibleDrawerView = false;
				if (type === 'refresh') {
					// 重新加载表格数据
					this.fetchParams = { ...this.fetchParams };
				}
			},
			collapseHandle() {
				this.$nextTick(() => {
					this.BaseTable.EXECUTE_RESET_HEIGHT();
				});
			}
		}
	};
</script>

<style lang="less" scoped>
</style>
